<template>
  <div class="dashboard-container" v-loading="loading">
    <!-- <div class="dashboard-text">你好！{{ name }}</div> -->
    <div class="topic">
      <span>公告</span>
    </div>
    <div class="year">
      <span style="margin-right: 10px;">年份</span>
      <el-select v-model="year">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="box-container">
      <div class="box-item" v-for="item, index in noticeList">
        <el-card>
          <h3 @click="showMore(item)" class="title">{{ item.title }}</h3>
          <div class="time">
            发布日期：{{ item.createTime }}
          </div>
          <p class="content">
            {{ item.content }}
          </p>
        </el-card>
      </div>
    </div>
    <el-dialog :visible.sync="isShow" width="40%">
      <h2 style="text-align: center;">{{ showNotice.title }}</h2>
      <div class="time">
        发布日期：{{ showNotice.createTime }}
      </div>
      <div v-html="showNotice.content" class="show-content">
      </div>
      <div style="text-align: right;">
        【编辑:{{ showNotice.uname }}】
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getIndexList } from '@/api/notice.js'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      year: new Date().getFullYear(),
      noticeList: [],
      loading: false,
      options: [],
      isShow: false,
      showNotice: {},
      year: new Date().getFullYear()
    }
  },
  mounted() {
    this.init();
    this.getInfo();
  },
  methods: {
    init() {
      for (var i = this.year; i >= this.year - 4; i--) {
        this.options.push({
          value: i,
          label: i
        })
      }
    },
    getInfo() {
      this.loading = true;
      getIndexList(this.year).then(res => {
        this.noticeList = res.data;
        this.loading = false;
      })
    },
    showMore(item) {
      this.isShow = true;
      this.showNotice = item;
    }
  },
  watch: {
    year(o, n) {
      this.getInfo();
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 20px;
    line-height: 46px;
  }
}

.box-item {
  width: 25%;
  padding: 10px;
}

.box-container {
  display: flex;
  flex-wrap: wrap;
}

.topic {
  font-size: 25px;
  text-align: center;
  margin-bottom: 20px;
}

.time {
  font-size: 12px;
  color: gray;
}

.title {
  cursor: pointer;
}

.year {
  text-align: right;
}

.content {
  display: -webkit-box;
  /* 将元素设置为块级弹性盒子 */
  -webkit-box-orient: vertical;
  /* 设置元素内部子元素排列方向为垂直方向 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  -webkit-line-clamp: 4;
  /* 设置最大显示的行数 */
}

.show-content {
  white-space: pre-wrap;
  margin: 20px 0;
}
</style>
